<template>
    <div class="comment-box">
        <!-- 攻略——评论——标题 -->
        <header class="header">
            <div @click="$router.back(-1)" class="iconfont icon-jiantou3"></div>
            <p>全部评论</p>
        </header>
        <!-- 评论内容 -->
        <ul class="comment-ul">
            <li class="comment-li" v-for="item of kindcomment" :key = "item.id">
                <img :src="item.images.small"/>
                <div>
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.genres }}</p>
                    <span>{{ item.year }}</span>
                </div>
            </li>
        </ul>
        <!-- 发送评论 -->
        <div class="send-comment-box">
            <textarea  name="sendComment" rows="2" placeholder="我要评论"></textarea>
            <div class="send-btn" @click="sendMsg">发送</div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import KindComment from '@/components/KindDetail/KindComment'
export default {
  data () {
    return {
      kindcomment: []
    }
  },
  components: {
    KindComment
  },
  created () {
    fetch('/taotao/douban').then(res => res.json())
      .then(data => {
        console.log(data)
        this.kindcomment = data
      })
  },
  methods: {
    sendMsg () {
      if (localStorage.getItem('isLogin') === 'ok') {
        fetch(`/taotao/comments?userid=${this.username}`).then(res => res.json())
          .then(data => {
            console.log(data)
            if (data === 1) {
              // 用户名已注册
              Toast({
                message: '已注册',
                position: 'bottom',
                duration: 2000
              })
            } else if (data === 0) {
              Toast({
                message: '获取验证码失败',
                position: 'bottom',
                duration: 2000
              })
            } else {
              this.adminCode = data.code
            }
          })
      } else {
        this.$router.push('/login')
        Toast({
          message: '登陆后才能评论',
          position: 'bottom',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.comment-box {
    @include rect(100%, 100%);
}
  //攻略--评论--标题
.header {
    @include line-height(0.44rem);
    position: relative;
    @include border(0 0 5px 0, #f5f5f5, solid);
    p {
        @include rect(100%, 100%);
        text-align: center;
        @include font-size(0.16rem)
    }
    .icon-jiantou3 {
        color: #fff;
        position: absolute;
        left: 0.1rem
    }
}
//评论--内容
.comment-ul {
    @include rect(100%, 85%);
    color: #000;
    overflow: auto;
    .comment-li {
        @include rect(100%, 0.9rem);
        img {
            @include rect(0.6rem, 0.6rem);
            @include margin(0.1rem 0.1rem);
            border-radius: 50%;
            border: 0.01rem solid #ccc;
            float: left;
        }
        div {
            @include rect(78%, 100%);
            padding: 0.1rem 0;
            float: right;
            @include border(0 0 0.01rem 0, #ccc, solid);
            h2 {
                @include rect(100%, 0.28rem);
                line-height: 0.2rem;
                font-size: 0.16rem;
            }
            p {
                @include rect(100%, 0.4rem);
                line-height: 0.2rem;
            }
            span {
              display: block;
              @include rect(95%, 0.1rem);
              line-height: 0.1rem;
              font-size: 0.1rem;
              text-align: right;
              color: #777
            }
        }
    }
}
//发送评论
.send-comment-box {
    // @include rect(100%, 15%);
    // background: #f00;
    @include border(0.03rem 0 0 0,#ea9c9a, solid);
    textarea {
        resize:none;
        @include rect(70%, 100%);
        @include margin(0.1rem 0.1rem);
        font-size: 0.16rem;
        line-height: 0.2rem;
        border: 0
    }
    .send-btn {
        @include rect(0.7rem, 0.4rem);
        float: right;
        background: #ea9c9a;
        border-radius: 0.2rem;
        line-height: 0.4rem;
        text-align: center;
        @include margin(0.1rem 0.1rem 0.1rem 0);
        color: #f5f5f5
    }
}
</style>
